<template>
	<view class="home-wrapper">
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper class="carousel"  circular autoplay @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList"  :key="index" class="carousel-item" >
					<image class="swiper-img" mode="widthFix"  :src="item.absoluteImgUrl" width="100%" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告栏 -->
		<uni-notice-bar v-if="notice" show-icon="true" scrollable="true" single="true" :text="notice" speed=50></uni-notice-bar>
		<!-- 商品列表栏 -->
		<view class="product-lists flex">
			<block v-for="item in productLists" :key="item.id">
				<view class="item flex">
					<view class="img">
						<image :src="item.absoluteImgUrl" mode="aspectFill" width='100%'></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="des flex">
						<view class="l">
							<text>¥</text>{{item.bzPrice.toFixed(2)}}</text>
						</view>
						<!-- <view class="r cursor">
							加入
						</view> -->
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
	import Request from '@/request/request.js'
	export default {
		components:{
			uniNoticeBar
		},
		data() {
			return {
				carouselList:["../../static/images/swiper-bg.png"],
				notice:'',
				productLists:[]
			}
		},
		onLoad() {
			
		},
		onReady(){
			this.getNotice()
			this.getCarousel()
			this.getGoodLists()
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			console.log('开启下拉刷新')
			this.getNotice()
			this.getCarousel()
			this.getGoodLists()
		},
		methods: {
			swiperChange(){
				
			},
			getNotice(){
				Request({
					url:'notice/list',
					method:'GET',
				}).then(res => {
					
					if(res.code == 0){
						this.notice = res.data[0].noticeContent
					}
				}).catch(err =>{})
			},
			getCarousel(){
				Request({
					url:'carousel/loadCarousels',
					method:'GET',
				}).then(res => {
					if(res.code == 0){
						console.log(res)
						this.carouselList = res.data.carouselDetails || []
					}
				}).catch(err =>{})
			},
			getGoodLists(){
				Request({
					url:'goods/list',
					data:{}
				}).then(res => {
					if(res.code == 0){
						res.data = res.data || []
						let arr1 = res.data.filter(function(item){
							return item.catsText == '辅料'
						})
						let arr2 = res.data.filter(function(item){
							return item.catsText != '辅料'
						})
						
						this.productLists = [...arr2,...arr1]
					}
				}).catch(err =>{})
			}
		}
	}
</script>

<style lang="less">
	.home-wrapper{
		width: 100%;
		.carousel-section{
			.carousel{
				height: 400rpx;
				image{
					width: 100%;
				}
			}
		}
		.product-lists{
			padding: 0 20rpx;
			flex-wrap: wrap;
			.item{
				width: 226rpx;
				height: 292rpx;
				background: #FFFFFF;
				margin: 0 16rpx 16rpx 0;
				flex-direction: column;
				box-shadow: 0 0 4rpx #e5e5e5;
				&:nth-of-type(3n){
					margin-right: 0;
				}
				.img{
					width: 226rpx;
					height: 204rpx;
					// background-color: pink;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					padding: 6rpx 4rpx 0;
					color: #333;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.des{
					padding: 0 4rpx;
					justify-content: space-between;
					color: #EE2C2C;
					margin-top: 4rpx;
					.l{
						text{
							font-size: 22rpx;
							padding-right: 6rpx;
							&.unit{
								font-size: 20rpx;
							}
						}
					}
					.r{
						height: 40rpx;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						padding: 0 16rpx;
						background-color: #34C847;
						border-radius: 0 16rpx 0 16rpx;
					}
				}
			}
		}
	}
</style>
